<template id="header-template">
  <div id="header">
    <ul :list="list">
	  <li v-for="n in list"><router-link class="nav-item" v-bind:to="n.url">{{n.name}}</router-link></li>
	</ul>
  </div>
</template>

<script>
export default{
  name:'header',
  data(){
   return {
   list :[
   {name:"Highchartes",
   url:"/highchartes"
   },
    {name:"vue基础",
   url:"/vue"
   },
    {name:"事例",
   url:"/exampleList"
   },
    {name:"菜单例四",
   url:"4"
   }
   
   ]
   }
  }
 }
</script>
<style>
    #header{height:30px;background:green;}
    #header ul{
        list-style:none;
    }
    #header li{
        float:left;
		width:100px;
		margin-left:3px;
		line-height:30px;
    }
	#header a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}
	#header a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
	#header a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}
	#header a  {display:block; text-align:center; height:30px;}
</style>